<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>
        大萌の记事本 | 记录日常生活，看世间繁华
    </title>

    <style>
        .hightlight {
            /*border-radius: 15px;*/
            /*-webkit-box-shadow: 0 0 5px rgba(0,113,241,1);*/
            background: burlywood;
        }
    </style>
    <!-- #style -->
    <link rel="stylesheet" type="text/css" media="all" href="" th:href="@{/asserts/css/style.css}"/>
    <link rel="stylesheet" href="#" type="text/css" media="screen" th:href="@{/asserts/css/wp-page-numbers.css}"/>
    <!-- 管理博客下拉菜单 -->
    <link rel="stylesheet" href="#" type="text/css" media="screen" th:href="@{/diy/dropdown_menus.css}"/>
    <link rel="stylesheet" href="#" type="text/css" media="screen" th:href="@{/diy/bootstrap_table.css}"/>
    <!-- #css -->
    <script type="text/javascript" src="#" th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script type="text/javascript" src="#" th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <!-- #js -->
</head>
<body data-rsssl=1 class="home blog two-column right-sidebar">
<div id="page" class="hfeed">
    <div th:replace="commons/layout :: #branding"/>
    <!-- #导航、首图、搜索 -->
    <div class="bs-example" data-example-id="condensed-table">
        <table class="table table-condensed">
            <p>
                <input placeholder="输入标签..." id="insertTag" style="margin-left: 10px;margin-top: 10px"/>
                <button class="add_btn">添加分类</button>
            </p>
            <thead>
            <tr>
                <th width="50%">类别</th>
                <th>操作</th>
                <th>文章数</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="tag:${tags_detail}">
                <th scope="row" th:attr="tagName=${tag.getName()}">
                    <div>[[ ${tag.getName()}]]</div>
                </th>
                <!--<th><input th:value="${tag.getName()}" type=""></th>-->
                <td>
                    <a href="javascript:void(0);" class = "edit_a" th:attr="tagid=${tag.getId()}">编辑</a>
                    <a href="javascript:void(0);" class = "delete_a" th:attr="tagid=${tag.getId()}" >删除</a>
                </td>
                <td>[[ ${tag.getTagedArtsCount()} ]]</td>
            </tr>
            </tbody>
        </table>
    </div>
    <script language='javascript' th:inline="javascript">

        $(document).on("click", ".add_btn", function() {
            var tagName = $(this).parent("p").children("input").val();
            $.ajax({
                url: "/createTag",
                data:{
                    tagName:tagName,
                },
                success:function(data){
                    location.reload();
                },
            });
        });

        $(document).on("click", ".edit_a", function() {
            // 从 '操作>编辑' 一直找到 '类别'字段
            var input = $(this).parent("td").parent("tr").children("th").children("div");
            var tagName = input.text();
            var replaceLabel = "<div><input value='"+tagName+"' /><a style='margin: 10px;' class='modify_success'>保存</a><a style='margin: 10px;' class='modify_cancel'>取消</a></div>";
            $(input).replaceWith(replaceLabel);
        });

        $(document).on("click", ".modify_success", function() {
            var input = $(this).parent("div").children("input");
            var tagId = $(this).parent("div").parent("th").parent("tr").children("td").children("a.edit_a").attr("tagid");
            var tagName = $(input).val();
            // 把结果传唤后端
            $.ajax({
                url: "/tagModify",
                data:{
                    tagId:tagId,
                    tagName:tagName,
                },
            });
            // 前端修改值，然后样式变成原样
            var div = $(this).parent("div");
            var repaceLable = "<div>"+ tagName +"</div>";
            div.replaceWith(repaceLable);
        });
        $(document).on("click", ".modify_cancel", function() {
            var input = $(this).parent("div").children("input");
            var th = $(this).parent("div").parent("th");
            var tagName = $(th).attr("tagName");
            var div = $(this).parent("div");
            var repaceLable = "<div>"+ tagName +"</div>";
            div.replaceWith(repaceLable);
        });

        $(document).on("click", ".delete_a", function() {
            var tagId = $(this).attr("tagid");
            $.ajax({
                url: "/deleteTag",
                data:{
                    tagId:tagId,
                },
                success:function(data){
                    location.reload();
                },
            });
        });


    </script>
    <!--标签管理-->
</div>
</body>
</html>